<template>
	<view class="page-container back-white">
		<!-- 驳回原因 -->
		<view v-if="status==2" class="row-box prow-l pcol-base back-orange warn-box">
			<text class="orange">审核驳回{{ messageContent?'：'+messageContent:'' }}</text>
		</view>
		
		<view class="prow-l pcol-lg">
			<!-- 店铺名称 -->
			<my-form-info type="input" labelName="店铺名称" attrName="name" :attrValue.sync="name" placeholder="请输入您的店铺名称" :maxlength="20"></my-form-info>
			<!-- 店铺地址 -->
			<my-form-info type="input" labelName="店铺地址" attrName="detail" :attrValue.sync="detail" placeholder="请输入您的店铺地址" :maxlength="30"></my-form-info>
			<!-- 门头照片 -->
			<my-form-info type="example" labelName="门头照片" :showExam="false"></my-form-info>
			<view class="pcol-l">
				<view v-if="head" class="upload-item">
					<image class="upload-image" :src="head" mode="aspectFill" @click.stop="previewImage(0, [head])"></image>
					<view v-if="status==-1 || status==2" class="row-box center radius-circle icon-box">
						<u-icon name="close" color="#ffffff" size="28" :bold="true" @click.stop="removeImage('head')"></u-icon>
					</view>
				</view>
				<view v-else class="upload-item" @click="selectUploadHandle('head')">
					<image class="upload-image" src="/static/icon/upload.png" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 营业执照 -->
			<my-form-info type="example" labelName="营业执照" :examUrl="exam1"></my-form-info>
			<view class="pcol-l">
				<view v-if="license" class="upload-item">
					<image class="upload-image" :src="license" mode="aspectFill" @click.stop="previewImage(0, [license])"></image>
					<view v-if="status==-1 || status==2" class="row-box center radius-circle icon-box">
						<u-icon name="close" color="#ffffff" size="28" :bold="true" @click.stop="removeImage('license')"></u-icon>
					</view>
				</view>
				<view v-else class="upload-item" @click="selectUploadHandle('license')">
					<image class="upload-image" src="/static/icon/upload.png" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 身份证 -->
			<my-form-info type="example" labelName="身份证" :examUrl="exam3"></my-form-info>
			<view class="row-box sb pcol-l prow-base">
				<view class="">
					<view v-if="front" class="upload-item-idcard">
						<image class="upload-image" :src="front" mode="aspectFill" @click.stop="previewImage(0, [front])"></image>
						<view v-if="status==-1 || status==2" class="row-box center radius-circle icon-box">
							<u-icon name="close" color="#ffffff" size="28" :bold="true" @click.stop="removeImage('front')"></u-icon>
						</view>
					</view>
					<view v-else class="upload-item-idcard" @click="selectUploadHandle('front')">
						<image class="upload-image" src="../static/bg_id_front.png" mode="aspectFill"></image>
					</view>
				</view>
				<view>
					<view v-if="back" class="upload-item-idcard">
						<image class="upload-image" :src="back" mode="aspectFill" @click.stop="previewImage(0, [back])"></image>
						<view v-if="status==-1 || status==2" class="row-box center radius-circle icon-box">
							<u-icon name="close" color="#ffffff" size="28" :bold="true" @click.stop="removeImage('back')"></u-icon>
						</view>
					</view>
					<view v-else class="upload-item-idcard" @click="selectUploadHandle('back')">
						<image class="upload-image" src="../static/bg_id_reverse.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			
			<!-- 阅读同意 -->
			<!-- <view class="row-box center mt-10" style="padding: 32rpx 0;" @click="agree=!agree">
				<image v-if="agree" class="icon40 mr-10" src="../static/icon_cb_select.png"></image>
				<image v-else class="icon40 mr-10" src="../static/icon_cb_unselect.png"></image>
				<text>我已阅读并同意</text>
				<text class="primary" @click="gotoWeb(url)">《XXXX协议》</text>
			</view> -->
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-button-box" style="padding-top: 40rpx;">
			<view class="submit-button" :class="buttonBackClass" @click="submitHandle()">{{ statusArr[status+1] }}</view>
		</view>
	</view>
</template>

<script>
	import env from '@/utils/env.js'
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				qntoken: '',  // 七牛云上传token
				name: '', // 店铺名称
				detail: '', // 店铺地址
				
				front: '', // 身份证正面临时地址
				frontLast: '', // 上一次身份证正面地址
				frontUpload: '', // 身份证正面上传后地址
				
				back: '', // 身份证反面临时地址
				backLast: '', // 上一次身份证反面临时地址
				backUpload: '', // 身份证反面上传后地址
				
				license: '', // 营业执照临时地址
				licenseLast: '', // 上一次营业执照临时地址
				licenseUpload: '', // 营业执照上传后地址
				
				head: '', // 门头照临时地址
				headLast: '', // 上一次门头照临时地址
				headUpload: '', // 门头照上传后地址
				
				agree: false, // 是否勾选同意
				url: '', // 同意协议协议地址
				exam1: "https://image.chongdu.com/9768f766-f8d4-46ed-89a4-828576b8839a.png", // 营业执照-商家认证
				exam3: "https://image.chongdu.com/02f8c0ab-6ea8-403d-b29f-8eec6fea1013.png", // 身份证
				
				status: -1, // 状态,0: 待审核；1:审核通过；2: 审核失败
				statusArr: ['提交认证', '待审核', '审核通过', '重新提交'],
				messageContent: '', // 审核驳回原因
			};
		},
		computed: {
			
			// 需要上传的图片的数量
			needNumber() {
				let number = 0
				if (this.front != this.frontLast) number += 1
				if (this.back != this.backLast) number += 1
				if (this.license != this.licenseLast) number += 1
				if (this.head != this.headLast) number += 1
				return number
			},
			
			// 上传后图片的数量
			uploadNumber() {
				let number = 0
				if ((this.front != this.frontLast) && this.frontUpload) number += 1
				if ((this.back != this.backLast) && this.backUpload) number += 1
				if ((this.license != this.licenseLast) && this.licenseUpload) number += 1
				if ((this.head != this.headLast) && this.headUpload) number += 1
				return number
			},
			
			// 底部按钮颜色
			buttonBackClass() {
				if (this.status==-1) {
					return 'back-primary'
				} else if (this.status==0) {
					return 'back-text-grey'
				} else if (this.status==1) {
					return 'back-gold'
				} else if (this.status==2) {
					return 'back-primary'
				}
			}
		},
		watch: {
			// 侦听图片上传后地址列表-上传完自动提交
			uploadNumber(newValue, oldValue) {
				if ((newValue == this.needNumber) && this.needNumber!=0) {
					// 上传完所有图片
					// 调用提交接口
					this.submit()
				}
			},
		},
		onLoad(options) {
			// 获取七牛上传使用TOKEN
			this.getUploadToken()
			// 获取认证详情
			this.getSettleInfo()
		},
		methods: {
			// 选择图片上传前的处理
			async selectUploadHandle(type) {
				switch (type){
					case 'head':
						this.head = await this.chooseSingelImage()
						break;
					case 'license':
						this.license = await this.chooseSingelImage()
						break;
					case 'front':
						this.front = await this.chooseSingelImage()
						break;
					case 'back':
						this.back = await this.chooseSingelImage()
						break;
					default:
						break;
				}
			},
			
			// 移除图片
			removeImage(type) {
				switch (type){
					case 'head':
						this.head = ''
						break;
					case 'license':
						this.license = ''
						break;
					case 'front':
						this.front = ''
						break;
					case 'back':
						this.back = ''
						break;
					default:
						break;
				}
			},
			
			// 点击提交
			submitHandle() {
				if (this.status!=-1 && this.status!=2) return
				if (!this.name) {
					return uni.showToast({
						icon: 'none',
						title: `未填写店铺名称！`
					})
				} else if (!this.detail) {
					return uni.showToast({
						icon: 'none',
						title: '未填写店铺地址！'
					})
				} else if (!this.head) {
					return uni.showToast({
						icon: 'none',
						title: '未选择门头照片！'
					})
				} else if (!this.license) {
					return uni.showToast({
						icon: 'none',
						title: '未选择营业执照！'
					})
				} else if (!this.front || !this.back) {
					return uni.showToast({
						icon: 'none',
						title: '未选择身份证照片！'
					})
				}
				// else if (!this.agree) {
				// 	return uni.showToast({
				// 		icon: 'none',
				// 		title: '未勾选同意协议！'
				// 	})
				// }
				
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				
				// 先上传图片，上传完所有图片再调用提交的接口
				let images = []
				if (this.front != this.frontLast) {
					images.push({ url: this.front, type: 0 })
				} else {
					this.frontUpload = this.frontLast
				}
				if (this.back != this.backLast) {
					images.push({ url: this.back, type: 1 })
				} else {
					this.backUpload = this.backLast
				}
				if (this.license != this.licenseLast) {
					images.push({ url: this.license, type: 2 })
				} else {
					this.licenseUpload = this.licenseLast
				}
				if (this.head != this.headLast) {
					images.push({ url: this.head, type: 3 })
				} else {
					this.headUpload = this.headLast
				}
				if (images.length) {
					images.forEach((item, index) => {
						let pathArr = item.url.split('.')
						let extra = pathArr[pathArr.length-1]
						// 获得唯一标识码
						let uniqueCode = this.generateUUID()
						uni.uploadFile({
							url: 'https://up-z2.qiniup.com',
							filePath: item.url,
							name: 'file',
							formData: {
								'key': uniqueCode + '.' + extra,
								'token': this.qntoken,
							},
							success: (res) => {
								console.log('uni.uploadFile', res)
								let strToObj = JSON.parse(res.data)
								let backUrl = env.imageUrl + strToObj.key
								// 处理上传成功后的返回值
								if (item.type==0) {
									this.frontUpload = backUrl
								} else if (item.type==1) {
									this.backUpload = backUrl
								} else if (item.type==2) {
									this.licenseUpload = backUrl
								} else if (item.type==3) {
									this.headUpload = backUrl
								}
							},
							fail: (err) => {
								console.log('uni.uploadFile', err)
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: '上传出错，提交失败！'
								})
							}
						})
					})
				} else { // 图片没有修改
					// 调用提交接口
					this.submit()
				}
			},
			
			// 提交接口
			submit() {
				let params = {}
				params['merchantName'] = this.name
				params['nowAddress'] = this.detail
				params['frontPhoto'] = this.frontUpload
				params['backPhoto'] = this.backUpload
				params['bisPhoto'] = this.licenseUpload
				params['headPhoto'] = this.headUpload
				
				this.$api.AddSettleMerchant(params).then(res => {
					console.log('AddSettleMerchant-success', res)
					uni.hideLoading()
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '提交成功！',
							success: () => {
								setTimeout(() => {
									// 重新获取认证详情
									this.getSettleInfo()
								}, 500)
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('AddSettleMerchant-fail', err)
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '提交失败！'
					})
				})
			},
			
			// 获取认证详情
			getSettleInfo() {
				this.$api.GetSettleMerchant().then(res => {
					console.log('GetSettleMerchant-success', res)
					if(res.data.code == 200) {
						if (res.data.data.id == null) return
						this.status = res.data.data.status
						if (this.status==2) this.messageContent = res.data.data.messageContent
						this.name = res.data.data.merchantName
						this.detail = res.data.data.nowAddress
						this.front = res.data.data.frontPhoto
						this.frontLast = res.data.data.frontPhoto
						this.back = res.data.data.backPhoto
						this.backLast = res.data.data.backPhoto
						this.license = res.data.data.bisPhoto
						this.licenseLast = res.data.data.bisPhoto
						this.head = res.data.data.headPhoto
						this.headLast = res.data.data.headPhoto
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('GetSettleMerchant-fail', err)
				}).finally(() => {
					
				})
			},
			
		},
	}
</script>

<style lang="scss">

</style>
